<script setup>
  import { onMounted, ref } from 'vue'
  import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
  import { http } from '@/utils/http.js'
  import { parseTime } from '@/utils/index.js'

  const currentPage = ref(1)
  const storeList = ref([])
  async function getDetail() {
    const res = await http.request({
      url: '/api/user/balanceLog',
      method: 'POST',
      data: {
        page: currentPage.value,
        limit: 10,
      },
    })
    storeList.value = [...storeList.value, ...res.data]
  }

  // 上拉加载
  onReachBottom(() => {
    ++currentPage.value
    getDetail() // 获取的数据列表
  })
  // 下拉刷新
  onPullDownRefresh(() => {
    currentPage.value = 1
    storeList.value = []
    getDetail() // 获取的数据列表
    uni.showToast({
      title: '刷新成功',
      icon: 'success',
      duration: 2000,
    })
    uni.stopPullDownRefresh() // 停止刷新
  })

  onLoad(() => {
    getDetail()
  })
</script>

<template>
  <view class="bar"> </view>
  <view class="store-detail" v-if="storeList.length">
    <view class="detail-item" v-for="item in storeList" :key="item.id">
      <view class="left">
        <view class="" style="font-size: 28rpx">
          {{ item.title }}
        </view>
        <view class="" style="font-size: 22rpx; color: #9b9b9d">
          {{ parseTime(item.add_time) }}
        </view>
      </view>
      <view class="right" v-if="item.in_type == 1"> +{{ item.money }} </view>
      <view class="right" v-else> -{{ item.money }} </view>
    </view>
  </view>
  <view
    class=""
    style="
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: 200rpx;
    "
    v-else
  >
    <image
      src="https://ojqn.wm2177.com/wechat_imgs/store-null.png"
      style="width: 214rpx; height: 214rpx"
      mode=""
    ></image>
    <view class="" style="margin-top: 22rpx; font-size: 26rpx; color: #cacaca">
      暂无记录
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .bar {
    height: 20rpx;
    background-color: #f5f5f5;
  }
  .store-detail {
    padding: 20rpx;
    .detail-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 154rpx;
      border-bottom: 2rpx solid #f5f5f5;
      &:last-child {
        border: none;
      }
      .right {
        font-weight: 700;
        font-size: 26rpx;
        color: #f58300;
      }
    }
  }
</style>
